<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<title>学生列表</title>

<js> <script>
	//toast配置
	toastr.options = {
		closeButton : false,
		debug : false,
		progressBar : true,
		positionClass : "toast-top-right",
		onclick : null,
		showDuration : "300",
		hideDuration : "1000",
		timeOut : "2000",
		extendedTimeOut : "1000",
		showEasing : "swing",
		hideEasing : "linear",
		showMethod : "fadeIn",
		hideMethod : "fadeOut"
	}
	//js代码中可以嵌入 java代码（包含JSTL，EL），但是只能在 jsp页面上，js文件中不起作用。
	$(function() {
		<c:if test="${not empty toastMsg}">
		toastr["success"]("${toastMsg}")
		</c:if>
		
		$(document).on("click", ".btn-delete", function(event) {

			//阻止事件冒泡
			event.stopPropagation();
			//阻止默认的事件
			event.preventDefault();
			if (confirm("确定要删除吗？") == true){
				var url=$(this).prop("href");
				$.ajax({
					type : "POST",
					url : url,
					data : {_method:"DELETE"}
				}).done(function(data) {
					if(data){
						$("#row"+data.id).remove();//移除表格的行
						toastr["success"]("删除"+data.name+"成功！");
					}
				});
			} 
		})
		
	})
</script> </js>

<div class="panel">
    <div class="panel-heading">
		<h4>学生信息管理</h4>
		<ul class="links">
			<li class="fa fa-list"></li>
		</ul>
	</div>
	<div class="panel-sub-heading">
	
		<form class="form-inline" action="${ctx}/students" method="get">
			<div class="form-group">
				<input name="name" class="form-control" type="text"
					placeholder="请输入姓名" value="" />
			</div>
			<div class="form-group">
				<select name="gender" class="form-control">
					<option value="">请选择</option>
					<option value="">男</option>
					<option value="">女</option>
				</select>
			</div>
		
			<button type="submit" class="btn btn-rounded btn-success">
				<span class="glyphicon glyphicon-search"></span>查询
			</button>
			<a href="${ctx}/students/create" class="btn btn-rounded btn-info" style="color: white;">添加</a>
		</form>
	</div>
	<div class="panel-body">
		<table class="table table-bordered table-hover">
			<tr>
				<th>序号</th>
				<th>姓名</th>
				<th>性别</th>
				<th>生日</th>
				<th>操作</th>
			</tr>
			<c:forEach var="student" items="${students}" varStatus="statu">
				<tr id="row${student.id}">
					<th>${statu.index+1}</th>
					<td>${student.name}</td>
					<td>${student.gender.text}</td>
					<td><fmt:formatDate value="${student.birthday}"
							pattern="yyyy-MM-dd" /></td>
					<td>
						<div class="btn-group">
							<a class="btn btn-info" href="${stx}/students/${student.id}">
								<span class="glyphicon glyphicon-eye-open"></span>
							</a> 
							<a class="btn btn-success" href="${stx}/students/${student.id}/update">
								<span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
							</a> 
							<a class="btn btn-danger btn-delete" href="${stx}/students/${student.id}">
								<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
							</a>
						</div>
					</td>
				</tr>
			</c:forEach>
		</table>
	</div>
</div>
		